import React, {useContext, useEffect, useState} from "react";
import {Text} from "react-native-elements";
import {Alert, Dimensions, StyleSheet, TouchableHighlight, TouchableOpacity, View} from "react-native";
import LocaleContext from "../libs/locale";
import {
    addressBookSvgXml_Mine,
    addressBookSvgXml_Mine_white,
    bookSvgXml_Mine,
    checkSvgXml, scanSvgXml, scanSvgXml_white,
    whiteTransSvgXml_transfer
} from "../libs/svgXml";
import {SvgXml} from "react-native-svg";
import {fontSize_12, fontSize_14, fontSize_15} from "./theme";
import {timeFormat} from "../libs/utils";
import {getTranHistoryToAddressList, nowWallet} from "./smartxL2Libs/L2_Data";

const {width,height,scale} = Dimensions.get("window");

const L2_Send_Way = ({navigation}:any) => {
    const [tranList,setTranList] = useState([

    ])
    useEffect(() => {
        navigation.setOptions({
            title:"转账",
        })
        initTranHistoryToAddressList()
    }, [])
    const initTranHistoryToAddressList = async () => {
        let ListTemp = await getTranHistoryToAddressList(nowWallet.chainID,nowWallet.address)
        setTranList(ListTemp)
    }

        return (
            <View style={styles.container}>
                <View style={styles.sendWays}>
                    <TouchableHighlight underlayColor={"transparent"} onPress={()=>{
                        navigation.navigate("L2_transfer");
                    }}>
                        <View style={styles.sendWay}>
                            <View style={{width:26,height:26,alignItems:"center",justifyContent:"center",backgroundColor:"#1e92ff",borderRadius:3}}>
                                <SvgXml xml={whiteTransSvgXml_transfer} width={15} height={15} />
                            </View>
                            <Text style={styles.sendWayTitle}>直接转账</Text>
                        </View>
                    </TouchableHighlight>
                    <TouchableHighlight underlayColor={"transparent"} onPress={()=>{
                        navigation.navigate("L2_AddressBookView");
                    }}>
                        <View style={styles.sendWay}>
                            <View style={{width:26,height:26,alignItems:"center",justifyContent:"center",backgroundColor:"#1e92ff",borderRadius:3}}>
                                <SvgXml xml={addressBookSvgXml_Mine_white} width={15} height={15} />
                            </View>
                            <Text style={styles.sendWayTitle}>地址簿转账</Text>
                        </View>
                    </TouchableHighlight>
                    <TouchableHighlight underlayColor={"transparent"} onPress={()=>{
                        // navigation.navigate("L2_transfer");
                    }}>
                        <View style={styles.sendWay}>
                            <View style={{width:26,height:26,alignItems:"center",justifyContent:"center",backgroundColor:"#1e92ff",borderRadius:3}}>
                                <SvgXml xml={scanSvgXml_white} width={15} height={15} />
                            </View>
                            <Text style={styles.sendWayTitle}>扫码转账</Text>
                        </View>
                    </TouchableHighlight>
                </View>
                <View style={styles.transHistory}>
                    <Text style={{fontSize:fontSize_15}}>转账历史</Text>
                    {
                        tranList.length?
                            tranList.map((item,index)=>(
                                <TouchableHighlight underlayColor={"transparent"} onPress={()=>{
                                    navigation.navigate("L2_transfer",{receiver:item.toAddress});
                                }} key={`tranList_`+index}>
                                    <View style={{width:"100%",paddingBottom:10,paddingTop:10,borderBottomWidth:1/scale,borderBottomColor:"#cecece"}}>
                                        <Text style={{fontSize:fontSize_15}}>{item.toAddress.slice(0,16)}...{item.toAddress.slice(-16)}</Text>
                                        <Text style={{fontSize:fontSize_12,color:"#cecece"}}>{timeFormat(item.timestamp)}</Text>
                                    </View>
                                </TouchableHighlight>
                            ))
                            :null
                    }
                </View>

            </View>
        )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: "#f6f6f6",
        paddingTop:50,
    },
    sendWays:{
        marginTop:0,
        width:"100%",
        flexDirection:"row",
        justifyContent:"space-between"
    },
    sendWay:{
        width:(width-40-40)/3,
        flexDirection:"column",
        alignItems:"center",
        justifyContent:"center",
        marginRight:20,
        backgroundColor:"#ffffff",
        elevation:15,
        borderRadius:5,
        paddingTop:15,
        paddingBottom:15
    },
    sendWayTitle:{
        fontSize:fontSize_14,
        marginTop:14
    },
    transHistory:{
        flex:1,
        marginTop:30,
        width:"100%",
        elevation:15,
        backgroundColor:"white",
        padding:15,
        marginBottom:15
    },
})
export default L2_Send_Way;


